<template>
    <div style="padding: 15px 20px 15px 5px">
        <div class="pre-text">{{ text }}</div>
        <vol-form ref="form" :labelWidth="80" :load-key="false" :formFields="fields" :formRules="formOptions">
        </vol-form>

        <div class="tables" style="padding-bottom: 10px">
            <el-tabs v-model="tabsModel" @tab-click="() => { }">
                <el-tab-pane style="padding: 0" class="table-item" v-for="(item, index) in tabs" :label="item.name"
                    :name="index + ''" :key="index">
                    <div class="table-header">
                        <div class="header-text">
                            {{ item.name }}
                        </div>
                        <div class="header-btns">
                            <el-button type="primary" size="mini" :key="bindex" :icon="btnItem.icon" plain
                                @click="tabsTableBtnClick(item, bindex, index)"
                                v-for="(btnItem, bindex) in item.buttons">
                                {{ btnItem.name }}
                            </el-button>
                        </div>
                    </div>
                    <vol-table :url="item.url" :load-key="false" :index="true" :ref="'tabsTable' + index"
                        :tableData="item.tableData" :columns="item.columns" :max-height="250"
                        :pagination-hide="item.pagination" :column-index="true" :ck="true"></vol-table>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="form-btns">
            <el-button type="primary" @click="submit" icon="el-icon-check" size="mini">提交</el-button>
            <el-button type="primary" @click="reset" plain icon="el-icon-refresh-right" size="mini">重置</el-button>
        </div>
    </div>
</template>

<script>
// 使用方式：
// 1、新建一个vue页面，把此页面内容复制进去
// 2、router->index.js配置路由，页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中
import VolTable from '@/components/basic/VolTable'
import VolForm from '@/components/basic/VolForm'
export default {
    components: { "vol-form": VolForm, 'vol-table': VolTable },
    data() {
        return {
            text: "",
            tabsModel: "0",
            fields: { "MarketId": null, "MarketbillsType": null, "ClientId": null, "ClientName": null, "ClientPhone": null, "DocumentMaker": null, "MakeOrderTime": null, "ReceiptDate": null, "field1724823795504": null, "field1724823796301": null, "field1724824023633": null, "Remark": null },
            formOptions: [[{ "field": "ProductId", "title": "销售单号", "type": "text", "required": true, "readonly": true, "colSize": null },
            { "field": "MarketbillsType", "title": "单据类型", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [{ "key": "1", "value": "退货入库" }, { "key": "2", "value": "销售出库" }], "dataKey": "单据类型" },
            { "field": "ClientId", "title": "客户编号", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [{ "key": "ded1d9ea-85c2-4e01-8fef-0ee1965d6d0a", "value": "李四" }, { "key": "9f5e1298-7135-4d64-afeb-08800d431753", "value": "王五" }, { "key": "7133967f-699e-4728-9b92-f1e19ebb3cd1", "value": "张三" }, { "key": "22747527-c2fc-4d87-966e-0e8c11f540b6", "value": "赵六" }], "dataKey": "客户下拉框绑定" }],
            [{ "field": "ClientName", "title": "客户名称", "type": "text", "required": true, "readonly": false, "colSize": null },
            { "field": "ClientPhone", "title": "联系方式", "type": "text", "required": true, "readonly": false, "colSize": null },
                    { "field": "ReceiptDate", "title": "发货日期", "type": "date", "required": true, "readonly": false, "colSize": null }],
                [{ "field": "DocumentMaker", "title": "制单人", "type": "text", "required": true, "readonly": false, "colSize": null },
                    { "field": "MakeOrderTime", "title": "制单日期", "type": "date", "required": true, "readonly": false, "colSize": null }],
            [{ "field": "Remark", "title": "备注", "type": "textarea", "required": false, "readonly": false, "colSize": 12 }]],

            tables: [],
            tabs: [
                {
                    "name": "产品信息",
                    "url": "/api/Market/GetProductList",
                    "tabs": true,
                    "pagination": false,
                    "buttons": [
                        {
                            "name": "添加行",
                            "ck": false,
                            "icon": "el-icon-plus",
                            "value": "add"
                        },
                        {
                            "name": "删除行",
                            "ck": false,
                            "icon": "el-icon-delete",
                            "value": "del"
                        },
                        {
                            "name": "刷新",
                            "ck": false,
                            "icon": "el-icon-refresh-right",
                            "value": "ref"
                        }
                    ],
                    "columns": [
                        {
                            "title": "产品名称",
                            "field": "ProductName",
                            "hidden": false,
                            "width": 120,
                            "required": false
                        },
                        {
                            "title": "产品编码",
                            "field": "ProductId",
                            "hidden": false,
                            "width": 120,
                            "required": false
                        },
                        {
                            "title": "规格",
                            "field": "Specification",
                            "hidden": false,
                            "width": 120,
                            "required": false
                        },
                        {
                            "title": "单价",
                            "field": "Price",
                            "hidden": false,
                            "width": 120,
                            "required": false
                        },
                        {
                            "title": "数量",
                            "field": "Count",
                            "hidden": false,
                            "required": 1,
                            "bind": {
                                "key": "",
                                "data": []
                            },
                            "edit": {
                                "type": "number"
                            }
                        },
                        {
                            "title": "总价",
                            "field": "Total",
                            "hidden": false,
                            "required": 0
                        }
                    ],
                    "tableData": [
                        {},
                        {},
                        {}
                    ]
                }
            ]
        };
    },
    created() {

    },
    methods: {
        submit() {
            this.$Message.success("submit")
            return;
            this.http.post("url", this.fields, true).then(result => {

            })
        },
        reset() {
            this.$refs.form.reset();
            this.$Message.success("表单已重置")
        },
        download() {
            this.$Message.info("111")
        }
    }
};

VolForm;
</script>
<style lang="less" scoped>
.form-btns {
    text-align: center;
}

.tables {
    padding-left: 15px;

    .table-item {
        padding: 10px;
    }

    .table-header {
        display: flex;
        margin-bottom: 8px;
    }

    .header-text {
        position: relative;
        bottom: -9px;
        flex: 1;
        font-weight: bold;
    }

    .header-btns {
        text-align: right;
    }
}
</style>